<template>
	<!-- 弹出规格选项 -->
	<view class="popup">
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-if="showModal" @tap="onhide"></view>
		<view @touchmove.stop.prevent="moveHandle" :class="'sku ' + (showModal==true ? 'shows':'')"
			:style="{bottom: showModal == true ? bottoms+'upx': ''}">
			<view class="sku_top">
				<image :src="imgurl | getImg" class="top_img"></image>
				<view class="sku_title">
					{{skuList.goods.name}}
				</view>
				<view class="moneys" v-if="currentItem.price != 0">
					<!-- 这里的价格是选择完规格后计算的价格  -->
					￥{{(Number(currentItem.price) * number).toFixed(2)}}
				</view>
				<view class="moneys" v-else>
					<!-- 这里的价格是选择完规格后计算的价格  -->
					￥{{(Number(skuList.goods.price) * number).toFixed(2)}}
				</view>
				<view class="kucun">
					<!-- 这里的价格是选择完规格后计算的库存 -->
					{{specShowString}}
				</view>
				<view class="kucun">
					<!-- 这里的价格是选择完规格后计算的库存 -->
					库存: {{currentItem.stock}}
				</view>
			</view>
			<block>
				<view v-for="(item, index) in nowList.sku" :key="index" class="sku_list"
					v-if="skuList.goods.leixing == 2">
					<view class="sku_name">
						{{item.value}}
					</view>
					<view class="sku_tag">
						<button v-for="(row, s) in item.items" :key="s" class="tag_s"
							:class="[row.isShow ? '' : 'noProduct',subIndex[index] == s ? 'act' : '']"
							@click="row.isShow?specificationBtn(row.name,index,s):''">
							{{row.name}}
						</button>
					</view>
				</view>
			</block>
			<view class=" number">
				<view class="n_left">购买数量</view>
				<view class="n_right">
					<text class="jian" @tap="onreduce">－</text>
					<input :value="number" disabled type="number" maxlength="2" class="inputs"></input>
					<text class="jia" @tap="onadd">＋</text>
				</view>
			</view>
			<view class="btn_box">
				<view class="addcart_btn" :style="'background-color:' + colors" @tap="onsubmit('add')">加入购物车
				</view>
				<view class="submit" :style="'background-color:' + colors" @tap="onsubmit('pay')">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AddCart,
		OrderFound
	} from "@/api/api.js"
	import {
		getCart,
		setCart,
		setGoodsData,
		getToken
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				number: 1,
				current: "",
				currentArr: [], //当前选中的规格数组
				currentSku: {}, //选择后的规格详情
				skulength: 0, //选择商品规格的长度
				issku: false, //判断当前商品是否存在规格
				update: true,
				nowList: {},
				rowid: 0,
				itemValue: '',
				arr: [],
				skuInfo: [],
				selectArr: [], //当前已选规格数组
				specShowString: '选择规格', //已选规格字符串展示
				currentItem: {
					attribute_name: '',
					price: 0,
					stock: 0
				}, //规格选完后的对象
				subIndex: [], //规格选中样式
				imgurl: ''

			};
		},
		components: {},
		props: {
			colors: {
				type: String
			},
			showModal: {
				type: Boolean,
				default: false
			},
			skuList: {
				type: Object
			},
			bottoms: {
				type: String,
				default: 0
			}
		},

		updated() {
			if (this.skuList.goods.leixing == 1) {
				//单规格商品属性取第一条
				this.currentItem = this.skuList.attribute[0]
				this.specShowString = this.currentItem.attribute_name
				this.imgurl = this.skuList.attribute[0].img_src
			} else {
				if (this.imgurl == '') {
					this.imgurl = this.skuList.goods.logo_url
				}
			}
			let attr = this.skuList.goods.attribute_result
			// attr = JSON.parse(attr)
			// console.log(attr);
			// attr.attr.forEach((item) => {
			// 	item.items.forEach((skuitem, skuindex) => {
			// 		skuitem.isShow = true;
			// 		// let obj = new Object()
			// 		// obj.name = item2
			// 		// obj.isShow = true
			// 		// item.detail[index2] = obj
			// 	})
			// })
			this.skuInfo = attr
			this.nowList.sku = attr.attr

		},
		computed: {
			skuArr() {
				return this.skuList.skuArr;
			}
		},
		watch: {
			skuList(value) { //监听商品规格变化 来清空之前所选的规格
				this.currentArr = []
				this.issku = false //初始化当前规格的条件
				this.number = 1 //初始数量
				this.skulength = 0 //初始化商品规格长度
				this.currentSku = value
				this.nowList = value

			}
		},
		methods: {
			/**
			 * @param {String} specName 当前点击规格按钮的值(黑色，35)
			 * @param {Number} specIndex 选择的规格下标(例子中颜色是0，尺码是1)
			 * @param {Number} specItemIndex 选择规格值下标(例子中35下标是0)
			 */
			specificationBtn(specName, specIndex, specItemIndex) {
				if (this.selectArr[specIndex] != specName) { //判断所选规格数组中是否包含当前点击规格
					this.$set(this.selectArr, specIndex, specName) //如果没有则把当前规格添加
					this.$set(this.subIndex, specIndex, specItemIndex) //添加选中样式

				} else {
					this.$set(this.selectArr, specIndex, '')
					this.$set(this.subIndex, specIndex, -1) //去除样式

				}
				this.specShowString = this.spaceRemoveArr(this.selectArr).join(',') ||
					'选择规格'; //所选规格页面中展示，数组为空则变为选择规格
				this.inventoryLookup(); //当规格选完后，去匹配
				this.clickPitch(); //库存判断，实现不可点击
			},
			spaceRemoveArr(arr) { //数组去除空字符串
				let tempArr = []
				arr.forEach(item => {
					if (item) {
						tempArr.push(item)
					}
				})
				return tempArr;
			},
			inventoryLookup() {
				let that = this
				try {
					that.skuList.attribute.forEach((item, index) => {
						if (item.attribute_name == that.specShowString) {
							that.$set(that, 'currentItem', item)
							that.$set(that, 'imgurl', item.img_src)
							console.log(that.imgurl);
							throw new Error();
						} else {
							that.currentItem = {
								attribute_name: '',
								price: 0,
								stock: 0
							};
							that.imgurl = that.skuList.goods.logo_url
						}
					})
				} catch (e) {}
			},
			clickPitch() {
				let result = [];
				for (let i in this.nowList.sku) {
					result[i] = this.selectArr[i] ? this.selectArr[i] : '';
				}
				//最难理解的大概就是这里了,这里跟着循环里打印结果，多走几遍就大致明白了  假象.jpg
				for (let i in this.nowList.sku) {
					let last = result[i];
					for (let k in this.nowList.sku[i].items) {
						result[i] = this.nowList.sku[i].items[k].name;
						// var pitch = this.isMay(result);
						// console.log(result, pitch);
						// this.$set(this.nowList.sku[i].items[k], 'isShow', pitch);
						// this.nowList.sku[i].detail[k].isShow = this.isMay(result)
						this.nowList.sku[i].items[k].isShow = this.isMay(result)
					}
					result[i] = last;
				}
			},
			isMay(result) {
				for (let i in result) {
					if (result[i] == '') {
						return true;
					}
				}
				for (let i in this.skuList.attribute) {
					if (this.skuList.attribute[i].attribute_name == result.join(",") && this.skuList.attribute[i]
						.stock >
						0 && this.skuList.attribute[i].is_shelf == 1) {
						return true;
					}
				}
			},
			moveHandle() {
				return
			},

			onhide() {
				//隐藏规格对话框
				this.$emit('onhide')
			},

			onadd() {
				//加
				let data = this.number + 1;
				this.setData({
					number: data
				});
			},

			onreduce() {
				//减
				if (this.number <= 1) {
					return;
				} else {
					let data = this.number - 1;
					this.setData({
						number: data
					});
				}
			},

			onsubmit(value) {
				// 此处应该判断是否登录 如果没登录 跳转到登录页

				if (!getToken()) {
					uni.navigateTo({ //登录
						url: '/pages/login/login'
					})
					return
				}
				//提交购物车
				if (this.currentItem.attribute_name == '' || this.currentItem.attribute_name ==
					undefined) { //如果规格长度和所选规格长度不相等 提示
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
				} else {
					//此处应调用接口来添加购物车 现模拟添加到购物车
					var datas = this.currentItem
					datas.goodsinfo = this.skuList.goods
					if (this.issku == true) { //判断当前商品是不是规格商品
						datas.selectSku = this.currentSku
					}
					datas.num = this.number
					if (value == 'add') { //如果是添加购物车

						AddCart({
							goods_id: this.skuList.goods.id,
							attr_unique: this.currentItem.attr_unique,
							num: this.number
						}).then(res => {
							if (res.status == 1) {
								uni.showToast({
									title: '加入购物车成功 !',
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						})

					} else { //如果是购买商品

						let goods = []
						goods.push(datas)
						setGoodsData(goods) //存储商品信息和商品规格
						uni.navigateTo({
							url: '../order/confirmation'
						})
					}
					setTimeout(() => {
						this.$emit('onhide')
					}, 800);
				}
			},

		}
	};
</script>
<style scoped lang="scss">
	.act {
		background: #fa436a !important;
		color: white !important;
	}

	.noProduct {
		color: #ccc !important;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}

	.sku {
		width: 100vw;
		min-height: 30vh;
		position: fixed;
		bottom: -100%;
		z-index: 910;
		left: 0;
		background-color: #ffffff;
		padding: 20upx 4%;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		border-bottom: 1upx solid #eee;
		transition: all 0.3s;
		box-sizing: border-box;
	}

	.shows {
		bottom: 0;
		transition: all 0.3s;
	}

	.sku_top {
		overflow: hidden;
		margin-top: 20upx;
	}

	.sku_top .top_img {
		height: 170upx;
		width: 170upx;
		float: left;
		margin-right: 15upx;
		border-radius: 8upx;
	}

	.sku_top .sku_title {
		font-size: 30upx;
		line-height: 35upx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.sku_top .moneys {
		font-size: 30upx;
		line-height: 40upx;
		overflow: hidden;
		margin-top: 20upx;
		font-weight: bold;
		color: #fa436a;
	}

	.sku_top .kucun {
		font-size: 24upx;
		color: #999;
		overflow: hidden;
	}

	.sku_list {
		margin-top: 20upx;
		overflow: hidden;
		margin-bottom: 40upx;
	}

	.sku_name {
		font-size: 24upx;
		color: #666;
		overflow: hidden;
	}

	.sku_tag {
		overflow: hidden;
		margin-top: 20upx;
	}

	.sku_tag .tag_s {
		height: 60upx;
		line-height: 60upx;
		align-items: center;
		padding: 0 20upx;
		text-align: center;
		font-size: 26upx;
		color: #202020;
		background-color: #F5F5F5;
		border: 1upx solid #F5F5F5;
		float: left;
		border-radius: 15upx;
		margin-right: 20upx;
		transition: all 0.2s;
		margin-bottom: 20upx;
		font-weight: 500;

		&::after {
			border: none;
		}
	}

	.number {
		margin-top: 10upx;
		border-top: 1upx solid #ccc;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		padding-top: 10upx;
	}

	.number .n_left {
		float: left;
		font-size: 28upx;
		color: #333;
	}

	.number .n_right {
		float: right;
		height: 60upx;
		width: 200upx;
		background-color: #F5F5F5;
		margin-top: 10upx;
		border-radius: 5upx;
	}

	.n_right .jian,
	.jia {
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 42upx;
	}

	.jian {
		float: left;
	}

	.jia {
		float: right;
	}

	.jian:active {
		background-color: #eee;
	}

	.jia:active {
		background-color: #eee;
	}

	.n_right .inputs {
		width: 76upx;
		float: left;
		text-align: center;
		margin-top: 6upx;
	}

	.btn_box {
		margin-top: 40upx;
	}

	.btn_box .addcart_btn,
	.submit {
		width: 40vw;
		height: 60upx;
		line-height: 60upx;
		border-radius: 42upx;
		font-size: 26upx;
		text-align: center;
		color: #ffffff;
		float: left;
		margin-left: 30upx;
		margin-bottom: 30upx;
	}

	.btn_box .addcart_btn:active {
		opacity: 0.8;
	}

	.btn_box .submit:active {
		opacity: 0.8;
	}

	.ondisabled {
		background-color: #F9F9F9;
		opacity: 0.5;
	}
</style>